import styled from "styled-components";
import "./reset.css";
function r(px) {
  let baseSize = 75 / 2;
  return (px / baseSize).toFixed(2) + "rem";
}
// 刘杰 我的页面
export const ToUserSd = styled.div`
  height: 100%;
  background-color: #f5f5f5;
  .user_content {
    width: 100%;
    height: ${r(213)};
    background-image: url(https://m.juooo.com/static/img/personal_bg_1.f5fc96c.png);
    background-repeat: no-repeat;
    background-size: 100%;
    .user_message {
      width: ${r(345)};
      height: ${r(158)};
      background: #fff;
      box-shadow: 0 0.05333rem 0.4rem 0.02667rem rgba(35, 35, 35, 0.08);
      border-radius: 0.10667rem;
      margin: 0 auto;
      position: relative;
      top: ${r(55)};
      .user_message_a {
        width: ${r(315)};
        height: ${r(51)};
        padding: 0 ${r(15)};
        position: relative;
        img {
          display: inline-block;
          margin-right: ${r(10)};
          width: ${r(58)};
          height: ${r(58)};
          position: relative;
          top: ${r(-8)};
        }
        span {
          position: absolute;
          top: ${r(15)};
          font-weight: 700;
          color: #232323;
          font-size: ${r(16)};
        }
        p {
          display: inline-block;
          position: absolute;
          bottom: ${r(0)};
          color: #999;
          font-size: ${r(12)};
        }
      }
      .user_message_b {
        width: ${r(345)};
        height: ${r(26)};
        p {
          width: ${r(56)};
          height: ${r(26)};
          padding: 0 ${r(10)} 0 ${r(15)};
          line-height: ${r(26)};
          float: right;
          color: #454341;
          font-weight: 700;
          background: linear-gradient(-45deg, #f5dea9, #f8d583);
          border-radius: 0.36rem 0 0 0.36rem;
        }
      }
      .user_message_c {
        width: 100%;
        height: ${r(81)};
        a {
          float: left;
          color: #666;
          width: 25%;
          height: ${r(46)};
          text-align: center;
          padding: ${r(15)} 0 ${r(20)};
          i {
            display: block;
            width: 100%;
            height: ${r(23)};
            color: #ff6743;
            font-size: ${r(20)};
            line-height: ${r(23)};
            margin-bottom: ${r(7)};
          }
          p {
            width: 100%;
            height: ${r(16)};
            line-height: ${r(16)};
          }
        }
        .user_open {
          i {
            color: #232323;
            font-size: ${r(13)};
          }
        }
      }
    }
  }
  .user_member {
    display: block;
    width: 100%;
    height: ${r(90)};
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .user_settingr-list {
    width: 92%;
    height: ${r(189)};
    padding: 0 4%;
    ul {
      display: block;
      width: 100%;
      height: ${r(89)};
      background-color: white;
      margin-bottom: ${r(12)};
      li {
        float: left;
        width: 25%;
        height: ${r(53)};
        padding: ${r(16)} 0 ${r(20)};
        img {
          display: block;
          width: ${r(33)};
          height: ${r(33)};
          margin: 0 auto;
          background-size: 100%;
        }
        p {
          width: 100%;
          height: ${r(16)};
          color: #232323;
          line-height: ${r(16)};
          text-align: center;
          margin-top: ${r(4)};
        }
        .kefu {
          color: #ff6743;
        }
        a {
          img {
            display: block;
            width: ${r(33)};
            height: ${r(33)};
            margin: 0 auto;
            background-size: 100%;
          }
          p {
            width: 100%;
            height: ${r(16)};
            color: #232323;
            line-height: ${r(16)};
            text-align: center;
            margin-top: ${r(4)};
          }
          .kefu {
            color: #ff6743;
          }
        }
      }
    }
  }
`;
// 刘杰 登录页面
export const ToRegTer = styled.div`
  width: 100%;
  height: ${r(667)};
  color: #232323;
  background-image: url(https://m.juooo.com/public/basic/Home/app/app-juooo5/images/login/login_bg.png);
  background-size: 100%;
  .register_toPath {
    width: 84%;
    height: ${r(41)};
    padding: 0 8%;
    .register_toPath_one {
      display: inline-block;
      width: ${r(41)};
      height: 100%;
      text-align: center;
      line-height: ${r(41)};
      color: #232323;
      font-size: ${r(24)};
    }
  }
  .register_content {
    width: 83%;
    height: ${r(360)};
    padding-top: ${r(55)};
    margin: 0 auto;
    h1 {
      display: block;
      width: 100%;
      height: ${r(24)};
      text-align: center;
      line-height: ${r(24)};
      font-weight: 700;
      font-size: ${r(24)};
    }
    .register_input {
      width: 100%;
      height: ${r(115)};
      padding-top: ${r(75)};
      input {
        display: block;
        width: 100%;
        height: ${r(45)};
        border: none;
        outline: none;
        border-bottom: ${r(1)} solid #666;
        color: #999999;
        font-size: ${r(16)};
      }
    }
    .register_toPath_two {
      display: block;
      width: 92%;
      height: ${r(50)};
      padding: 0 4%;
      text-align: center;
      margin-top: ${r(45)};
      line-height: ${r(50)};
      background-color: rgb(255, 154, 52);
      border-radius: ${r(25)};
      color: #fefefe;
      font-size: ${r(16)};
    }
    .register_wangji_mm {
      width: 100%;
      height: ${r(20)};
      margin-top: ${r(20)};
      line-height: ${r(20)};
      font-size: ${r(15)};
      .register_wangji_mm_left {
        float: left;
      }
      .register_wangji_mm_right {
        float: right;
      }
    }
  }
  .register_else {
    width: 64%;
    height: ${r(70)};
    margin-top: ${r(80)};
    padding: 0 18%;
    .register_else_top {
      position: relative;
      width: 100%;
      height: ${r(30)};
      border-top: 1px solid #999999;
      p {
        position: absolute;
        width: ${r(78)};
        height: ${r(25)};
        padding: 0 ${r(10)};
        top: ${r(-14)};
        left: ${r(75)};
        z-index: 100;
        color: #999999;
        text-align: center;
        line-height: ${r(25)};
        background-color: white;
      }
    }
    .register_else_bot {
      width: 100%;
      height: ${r(36)};
      display: flex;
      justify-content: space-around;
      a {
        img {
          display: block;
          width: ${r(36)};
          height: ${r(36)};
        }
      }
    }
  }
`;
